<!--
 * @Author: your name
 * @Date: 2020-04-12 15:59:27
 * @LastEditTime: 2020-06-10 14:55:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\profile\index.vue
-->
<template>
  <div class="app-container">
    <div>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-card>
            <fieldset class="fieldInfo">
              <legend>
                <span>用户信息</span>
              </legend>
              <div>
                <el-form ref="postForm" :model="user" class="form-container">
                  <div class="createPost-main-container">
                    <el-row>
                      <el-col :span="24">
                        <div class="postInfo-container">
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="用户名"
                                prop="name"
                                class="postInfo-container-item"
                              >
                                <el-input placeholder="请输入旧密码" v-model="user.name" readonly></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="真实姓名"
                                prop="rname"
                                class="postInfo-container-item"
                              >
                                <el-input placeholder="请输入新密码" v-model="user.rname" readonly></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="角色"
                                prop="roles"
                                class="postInfo-container-item"
                              >
                                <el-input placeholder="请输入新密码" v-model="user.roles" readonly></el-input>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-form>
              </div>
            </fieldset>
            <fieldset class="fieldInfo">
              <legend>
                <span>修改密码</span>
              </legend>
              <div>
                <el-form ref="postForm" :model="postForm" :rules="passRules" class="form-container">
                  <div class="createPost-main-container">
                    <el-row>
                      <el-col :span="24">
                        <div class="postInfo-container">
                          <el-row>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="原密码"
                                prop="password"
                                class="postInfo-container-item"
                              >
                                <el-input
                                  placeholder="请输入旧密码"
                                  v-model="postForm.password"
                                  type="password"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="24">
                              <el-form-item
                                label-width="115px"
                                label="新密码"
                                prop="newPassword"
                                class="postInfo-container-item"
                              >
                                <el-input
                                  placeholder="请输入新密码"
                                  v-model="postForm.newPassword"
                                  type="password"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <el-form-item style="text-align: right;">
                                <el-button type="primary" @click="savePassword">保存</el-button>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-form>
              </div>
            </fieldset>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { editUserPassword } from '@/api/user'
export default {
  name: 'Profile',
  data() {
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        const reg = /^[a-zA-Z0-9]+$/
        // console.log(reg.test(value));
        if (reg.test(value)) {
          if (value.length < 6) {
            return callback(new Error('密码长度不够'))
          } else {
            callback()
          }
        } else {
          return callback(new Error('密码只能是英文或数字'))
        }
      }
    }
    return {
      user: '',
      postForm: {
        id: '',
        password: '',
        newPassword: ''
      },
      passRules: {
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userId', 'name', 'rname', 'roles'])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        userId: this.userId,
        name: this.name,
        rname: this.rname,
        roles: this.roles.join(' | ')
      }
    },
    savePassword() {
      // editUserPassword.
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          console.log(valid, this.postForm)
          this.postForm.id = this.user.userId
          editUserPassword(this.postForm).then((res) => {
            if (res.code == 20000) {
              this.$notify({
                title: '成功',
                message: '修改密码成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
        } else {
          this.$notify({
            title: '失败',
            message: '验证密码失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.fieldInfo {
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  height: 40vh;
  legend {
    color: #666;
  }
}
</style>
